<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8"/>
    <title>发送邮件</title>
    <!-- 新 Bootstrap 核心 CSS 文件 -->
    <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body>
<div>
    <marquee behavior="alternate" onfinish="alert(12)"
             onMouseOut="this.start();$('#egg').text('嗯 真听话！');"
             onMouseOver="this.stop();$('#egg').text('有本事放开我呀！');">
        <!--<h5>祝大家新年快乐！</h5><img src="http://5b0988e595225.cdn.sohucs.com/images/20180205/4f2d21b8d73a41ac9392b90cce34dc94.gif" alt="">-->
    </marquee>

    <form id="mailForm" role="form">
        <div class="form-group">
            <label>邮件发信人:</label>
            <div>
                <input name="from" class="form-control" th:value="${from}"  readonly="readonly">
            </div>
        </div>
        <div>
            <label>邮件收信人:</label>
            <div>
                <input class="form-control" name="to">
            </div>
        </div>
        <div>
            <label>邮件主题:</label>
            <div>
                <input class="form-control" name="subject">
            </div>
        </div>
        <div>
            <label>邮件内容:</label>
            <div>
                <textarea class="form-control" name="text"></textarea>
            </div>
        </div>
        <div>
            <label>邮件附件:</label>
            <div>
                <input type="file" class="form-control" name="files">
            </div>
        </div>
        <div>
            <label>邮件操作:</label>
            <div>
                <a class="btn btn-success" onclick="sendMail()">发送邮件</a>
                <a class="btn btn-warning" onclick="clearForm()">清&emsp;&emsp;空</a>
            </div>
        </div>
    </form>

    <script th:inline="javascript">
        var appCtx = [[${#request.getContextPath()}]];

        function sendMail() {

            var formData = new FormData($('#mailForm')[0]);
            $.ajax({
                url: appCtx + '/mail/send',
                type: "POST",
                data: formData,
                contentType: false,
                processData: false,
                success: function (result) {
                    alert(result.status === 'ok' ? "发送成功！" : "你被Doge嘲讽了：" + result.error);
                },
                error: function () {
                    alert("发送失败！");
                }
            });
        }

        function clearForm() {
            $('#mailForm')[0].reset();
        }

        /*setInterval(function () {
            var total = $('#mq').width();
            var width = $('#doge').width();
            var left = $('#doge').offset().left;
            if (left <= width / 2 + 20) {
                $('#doge').css('transform', 'rotateY(180deg)')
            }
            if (left >= total - width / 2 - 40) {
                $('#doge').css('transform', 'rotateY(-360deg)')
            }
        });*/
    </script>
</div>
</body>
</html>